Skip to main content

ApplicationForm

ApplicationForm​

The ApplicationForm component is a React component built using Formik and React Bootstrap. It provides a structured form for creating and configuring applications. This component is likely part of a larger application management or development platform.

Purpose​

The primary goal of the ApplicationForm is to:

  • Collect user inputs for defining a new application or editing an existing one.
  • Guide users through a multi-step configuration process using tabs and accordions.
  • Validate user inputs using Yup schema validation.
  • Submit application data using an API mutation (useAddApplicationMutation).
  • Provide a visually engaging and user-friendly interface for application configuration.

Component Structure​

The ApplicationForm component is organized into several key sections:

  1. Tabbed Interface: Uses React Bootstrap's Tab.Container and Nav components to create a tabbed interface, dividing the application creation process into logical steps:

    • Configure the Basics
    • Define Object Schema
    • Setup Workflows
    • Push and Edit Code (*)
    • Launch Test Container (*)
    • Download Project File (*)

  2. Formik Form: Wraps the main content within a Formik form (<Formik>) to handle form state, validation, and submission.

  3. Accordion Wizard: Within the "Configure the Basics" tab, an accordion (<Accordion>) is used to further organize form sections:

    • Debug Info (for form diagnostics)
    • Add New Application (main form fields)

  4. Form Fields: Uses Formik's <Field> and React Bootstrap's <BSForm.Select> and <BSForm.Check> components to render various form input types:

    • Text fields (<Field type="text">) for name, description, and entrypointUrl.
    • Dropdowns (<BSForm.Select>) for type and status, populated by TypeLookup and StatusLookup components.
    • Checkbox (<BSForm.Check>) for isTemplate.

  5. Validation: Implements form validation using Yup (validationSchema).

  6. Submission: Handles form submission using the handleSubmit function, which calls the addApplication mutation.

  7. Visual Elements:

    • Uses icons from react-icons (FiCheckCircle, FiBox, FaCogs, FaRegPlusSquare) for visual cues and styling.
    • Includes a CoolButton component (likely a custom button component from the library) for the submit button.
    • Applies custom CSS (./index.css) for styling.
    • Uses a dynamic background image based on application.contentMedia.

Props​

The ApplicationForm component accepts the following props:

  • application: An Application object (likely a model defined in ../../thor/model) representing the initial values for the form.

States​

The component does not explicitly manage its own React state using useState or useReducer. Form state is managed by Formik.

Functionality​

  • Form Initialization: The initialValues prop of <Formik> is set to the application prop, pre-filling the form with existing application data (if available).
  • Input Validation: Form fields are validated against the validationSchema as the user interacts with them (on blur).
  • Dropdown Lookups: TypeLookup and StatusLookup components provide options for the "Type" and "Status" dropdown fields, respectively. These are likely based on predefined enums or lists of valid values.
  • Submission Handling:
    • The handleSubmit function is called when the form is submitted.
    • It simulates an API call delay using setTimeout.
    • It calls the addApplication mutation (useAddApplicationMutation) to submit the form data.
    • It sets the isSubmitting state to control the submit button's loading state.
  • Debug Accordion: Includes a "Debug Info" accordion that displays form diagnostics like errors, touched fields, and mutation results. This is helpful for development and debugging.

Dependencies​

  • react: Core React library.
  • formik: For form management and validation.
  • yup: For schema-based form validation.
  • react-bootstrap: For UI components like Container, Tab, Nav, Col, Row, Form, Accordion, Spinner.
  • react-icons: For icons (FiBox, FiCheckCircle, FaCogs, FaRegPlusSquare).
  • ../../thor/model/Application: Likely a generated model for the Application data structure.
  • ../../thor/redux/services/ApplicationService: Redux RTK Query service for API interactions related to applications, specifically useAddApplicationMutation.
  • ../../website/app/workflow/WorkflowList: Component for listing workflows (used in the "Setup Workflows" tab).
  • ../CoolButton: Custom button component.
  • ../OpenAPISpec: Component for graphical OpenAPI spec design (used in the "Define Object Schema" tab).
  • ./index.css: Custom stylesheet for the component.

Notes​

  • The component is generated, as indicated by the comment block at the top. This suggests that it might be auto-generated from an OpenAPI specification or similar definition.
  • The component uses a wizard-like interface with tabs and accordions to guide users through the application configuration process.
  • The use of Redux RTK Query (useAddApplicationMutation) indicates that the application likely uses Redux for state management and API interactions.
  • The component includes basic form validation and error handling.
  • The visual design is enhanced with icons, custom styles, and a dynamic background image.